<template>
	<view>
		
		<view class="page-body">
			<form>
				<view class="page-section">
				
						
						<view class="textarea-wrp">
							<textarea  placeholder="请输入意见..." @blur="bindTextAreaBlur" auto-height />
						</view>

					<view class="uni-list list-pd">
						<view class="uni-list-cell cell-pd">
							<view class="uni-uploader">
								<view class="uni-uploader-head">
									<view class="uni-uploader-title">可上传图片</view>
									<view class="uni-uploader-info">{{imageList.length}}/3</view>
								</view>
								<view class="uni-uploader-body">
									<view class="uni-uploader__files">
										<block v-for="(image,index) in imageList" :key="index">
											<view class="uni-uploader__file">
												<image class="uni-uploader__img" :src="image" :data-src="image" @tap="previewImage"></image>
											</view>
										</block>
									</view>
									<view class="uni-uploader__input-box">
										<view class="uni-uploader__input" @tap="chooseImage"></view>
									</view>
								</view>
							</view>
						</view>
					</view>

				</view>
			</form>
			
			<button type="primary" class="uni-opinion-button">提交</button>
		</view>
	</view>
</template>
<script>
	import pageHead from '../../../components/page-head.vue'
	export default {
		data() {
			return {
				focus: false,
				imageList: [],
				countIndex: 2,
				count: [1, 2, 3]
			}
		},
		onUnload(){
			this.imageList = [],
			this.countIndex= 2;
		},
		methods: {
			
			bindTextAreaBlur: function (e) {
				console.log(e.detail.value)
			},
			countChange: function (e) {
				this.countIndex = e.target.value;
			},
			chooseImage: async function () {
				if(this.imageList.length === 3){
					let isContinue = await this.isFullImg();
					console.log("是否继续?",isContinue);
					if(!isContinue){
						return;
					}
				}
				uni.chooseImage({
					count: this.imageList.length + this.count[this.countIndex] > 3 ? 3 - this.imageList.length : this.count[this.countIndex],
					success: (res) => {
						this.imageList = this.imageList.concat(res.tempFilePaths);
					}
				})
			},
			isFullImg:function(){
				return new Promise((res) => {
					uni.showModal({
						content:"已经有3张图片了,是否清空现有图片？",
						success: (e) => {
							if(e.confirm){
								this.imageList = [];
								res(true);
							}else{
								res(false)
							}
						},
						fail:() => {
							res(false)
						}
					})
				})
			},
			previewImage: function (e) {
				var current = e.target.dataset.src
				uni.previewImage({
					current: current,
					urls: this.imageList
				})
			}
		},
		components: {
			pageHead
		}
	}
</script>

<style>
	@import "../../../common/uni.css";
      textarea {
      		width: 700px;
      		padding: 25px 0;
      		height: 34px;
      		line-height: 34px;
      		font-size: 28px;
      	}
      	.textarea-wrp {
      		padding: 0 25px;
      		background-color: #fff;
      	}
	    .cell-pd {
		padding: 22px 30px;
	}
	.uni-opinion-button{
		height: 65px;
		line-height: 65px;
		}

	
</style>
